<template>
  <div>
    <!-- 展示列表 -->
    <el-card>
      <!-- 筛选条件 -->
      <div slot="header">
        <el-row :gutter="4">
          <el-form :inline="true" label-position="left" label-width="100px">
            <el-form-item style="margin-bottom: 0;">
              <el-input
                clearable=""
                class="mr5 sh"
                placeholder="请输入关键字"
                v-model="searchDto.keywords"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:0;">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="getMenuListMobile"
                >查询
              </el-button>
              <el-button type="primary" icon="el-icon-s-open" @click="clear"
                >重置</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-circle-plus"
                @click="addMenu"
                >新增菜单
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <!-- 表格 -->
      <page-table
        :page-data="menuListMobile"
        :loading="loading"
        :do-get-page-data="getMenuListMobile"
      >
        <el-table-column
          prop="name"
          label="资源名称"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="alias" label="别名" align="center">
        </el-table-column>
        <el-table-column prop="type" label="资源类型" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type | keyText("SYS-MENU-TYPE") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status | keyText("RESOURCE_APP_STATUS") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否公开" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isOpen"
              @change="open(scope.row)"
              active-color="#13ce66"
              inactive-color="#ccc"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="分配用户" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="allocation(scope.row)">
              点击分配
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="管理" width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                type="button"
                size="mini"
                icon="el-icon-edit"
                @click="edit(scope.row)"
              >
              </el-button
            ></el-tooltip>
            <el-tooltip content="删除" placement="top"
              ><el-button
                size="mini"
                icon="el-icon-delete"
                @click="del(scope.row)"
              >
              </el-button
            ></el-tooltip>
          </template>
        </el-table-column>
      </page-table>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog title="资源详情" :visible.sync="show" width="30%">
      <el-form :model="form" label-width="100px" :rules="rules">
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="别名" prop="alias">
          <el-input v-model="form.alias"></el-input>
        </el-form-item>
        <el-form-item label="资源访问url" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>

        <el-form-item label="资源排序" prop="sn">
          <el-input v-model="form.sn"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="level">
          <el-input v-model="form.level"></el-input>
        </el-form-item>
        <el-form-item label="资源类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in menuTypes"
              :key="item.keyword"
              :label="item.label"
              :value="item.keyword"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="属性" prop="type">
          <el-select v-model="form.property" placeholder="请选择">
            <el-option
              v-for="item in propertyType"
              :key="item.keyword"
              :label="item.label"
              :value="item.keyword"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图标" v-if="showIcon">
          <picture-upload
            v-model="form.icon"
            type="icon"
            @del-picture="delPicture"
            @add-picture="addPicture"
          ></picture-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "getMenuMobile",
  created() {
    this.getMenuListMobile();
  },
  mounted() {
    console.log(this.menuTypes);
  },
  data() {
    return {
      searchDto: {
        keywords: ""
      },
      menuListMobile: {},
      loading: false,
      show: false,
      showIcon: false,
      form: {},
      rules: {
        name: [{ required: true, message: "请输入资源名称", trigger: "blur" }],
        alias: [{ required: true, message: "请输入资源名称", trigger: "blur" }],
        type: [{ required: true, message: "请输入资源名称", trigger: "blur" }]
      },
      menuTypes: this.getDictionary("SYS-MENU-TYPE"),
      propertyType: this.getDictionary("APP_PROPERTY_TYPE")
    };
  },
  watch: {
    show(val) {
      !val ? (this.showIcon = false) : (this.showIcon = true);
    }
  },
  methods: {

    // 获取表格信息
    getMenuListMobile(val = {}) {
      Object.assign(val, this.searchDto);
      this.API.getResourceAppPageList(val).then(ret => {
        console.log(ret.data);
        this.menuListMobile = ret.data;
      });
    },
    // 编辑，打开弹框
    edit({ id }) {
      this.form = {};
      this.form.icon = "";
      this.API.getResourceAppById({ id }).then(ret => {
        console.log(ret.data);
        this.form = ret.data;
        this.show = true;
      });
    },
    // 删除
    del({ id }) {
      this.$confirm("确认删除?", "提示", {
        type: "warning"
      }).then(() => {
        this.API.deleteResourceAppById({ id }).then(ret => {
          this.getMenuListMobile();
        });
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      });
    },
    // 弹框保存按钮
    save() {
      let body = this.form;
      // 设置默认值
      if (!body.id) {
        body.isOpen = true;
        body.status = "OPEN_SHOW";
      }
      this.API.addOrUpdateResourceApp({ body }).then(ret => {
        this.success("保存成功");
        this.show = false;
        this.getMenuListMobile();
      });
    },
    // 表格是否公开按钮
    open(body) {
      console.log(body);
      this.API.addOrUpdateResourceApp({ body }).then(ret => {
        this.success("保存成功");
      });
    },
    // 表格是否展示按钮
    status(body) {
      console.log(body);
      this.API.addOrUpdateResourceApp({ body }).then(ret => {
        this.success("保存成功");
      });
    },
    // 表格分配用户按钮
    allocation(row) {
      this.$router.push({
        name: "appDisUser",
        query: {
          resId: row.id
        }
      });
    },
    // 删除图片回调
    delPicture(type) {
      this.form[type] = "";
    },
    // 添加图片回调
    addPicture(val, type) {
      this.form[type] = val;
    },
    // 重置按钮
    clear() {
      this.searchDto = {
        keywords: ""
      };
      this.getMenuListMobile();
    },
    // 新增菜单按钮
    addMenu() {
      this.show = true;
      this.form = {};
      this.form.type = this.menuTypes[0].keyword;
      this.form.property = this.propertyType[0].keyword;
    }
  }
};
</script>

<style scoped></style>
